<template>
	<div class="login-form-wrapper">
		<div class="login-form-title">{{ $t('login.form.title') }}</div>
		<div class="login-form-sub-title">{{ $t('login.form.title') }}</div>
		<div class="login-form-error-msg">{{ errorMessage }}</div>
		<a-form ref="loginForm" :model="userInfo" class="login-form" layout="vertical" @submit="handleSubmit">
			<a-form-item field="number" :rules="[{ required: true, message: $t('login.form.number.errMsg') }]"
				:validate-trigger="['change', 'blur']" hide-label>
				<a-input v-model="userInfo.number" :placeholder="$t('login.form.number.placeholder')">
					<template #prefix>
						<icon-user />
					</template>
				</a-input>
			</a-form-item>
			<a-form-item field="password" :rules="[{ required: true, message: $t('login.form.password.errMsg') }]"
				:validate-trigger="['change', 'blur']" hide-label>
				<a-input-password v-model="userInfo.password" :placeholder="$t('login.form.password.placeholder')"
					allow-clear>
					<template #prefix>
						<icon-lock />
					</template>
				</a-input-password>
			</a-form-item>
			<a-space :size="16" direction="vertical">
				<a-button type="primary" html-type="submit" long :loading="loading">
					{{ $t('login.form.login') }}
				</a-button>
			</a-space>
		</a-form>
	</div>
</template>

<script lang="ts" setup>
	import { ref, reactive } from 'vue';
	import { useRouter } from 'vue-router';
	import { Message } from '@arco-design/web-vue';
	import { ValidatedError } from '@arco-design/web-vue/es/form/interface';
	import { useI18n } from 'vue-i18n';

	import { useUserStore } from '@/store';
	import useLoading from '@/hooks/loading';
	import type { LoginData } from '@/api/user';
	import { generateLoginData } from '@/api/user';

	const router = useRouter();
	const { t } = useI18n();
	const errorMessage = ref('');
	const { loading, setLoading } = useLoading();
	const userStore = useUserStore();


	const userInfo = reactive({
		number: "",
		password: "",
	});

	const handleSubmit = async ({
		errors,
		values,
	} : {
		errors : Record<string, ValidatedError> | undefined;
		values : Record<string, any>;
	}) => {
		if (loading.value) return;
		if (!errors) {
			setLoading(true);
			console.log(values)
			const loginData : LoginData = generateLoginData(userInfo.number, userInfo.password);
			try {
				await userStore.login(loginData);
				const { redirect, ...othersQuery } = router.currentRoute.value.query;
				router.push({
					name: (redirect as string) || 'Workplace',
					query: {
						...othersQuery,
					},
				});
				Message.success(t('login.form.login.success'));
				// 实际生产环境需要进行加密存储。
				// The actual production environment requires encrypted storage.
			} catch (err) {
				errorMessage.value = (err as Error).message;
			} finally {
				setLoading(false);
			}
		}
	};
</script>

<style lang="less" scoped>
	.login-form {
		&-wrapper {
			width: 320px;
		}

		&-title {
			color: var(--color-text-1);
			font-weight: 500;
			font-size: 24px;
			line-height: 32px;
		}

		&-sub-title {
			color: var(--color-text-3);
			font-size: 16px;
			line-height: 24px;
		}

		&-error-msg {
			height: 32px;
			color: rgb(var(--red-6));
			line-height: 32px;
		}

		&-password-actions {
			display: flex;
			justify-content: space-between;
		}

		&-register-btn {
			color: var(--color-text-3) !important;
		}
	}
</style>